<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>变量类型和计算</title>
</head>
<body>
  
  <script>
      console.log(0 == '0')
      var obj = {}; obj.a = 100;
      var arr = []; arr.a = 200;
      function fn(){}; fn.a = 300;

      console.log(obj.__proto__)
      console.log(arr.__proto__)
      console.log(fn.__proto__)

      console.log(fn.prototype) // 显示原型属性 

      console.log('-------构造函数-------')
      function Foo(name, age){
        this.name = name
        this.test = function(){
          console.log('test')
        }
      }
      Foo.prototype.alertName = function(){
        console.log(this.name)
      }
      var f = new Foo('张三', 23)
      f.printAge = function(){
        console.log(this.age)
      }
      console.log(f.__proto__ instanceof Object)
      console.log(f.toString())
      var item;
      for(item in f){
        if(f.hasOwnProperty(item)){ // 屏蔽原型中的属性
          console.log(item)
        }
      }

      console.log('-------作用域和闭包----------')
      console.log(a)
      var a = 100;

      fnc('zhangsan')
      function fnc(name){
        // 函数执行之前 变量提前
        age = 20
        console.log(name, age)
        var age
        bar(100)
        function bar(num){
          console.log(num)
        }
      }
      console.log('-----------执行上下文---------')
      console.log(aa)
      var aa = 100;

      fnc('zhangsan')
      function fnc(name){
        age = 20
        console.log(name, age)
        var age
      }

      console.log('-------------this----------')
      function Foo(name){
        this.name = name
      }

      var obj = {
        name: 'A',
        printName: function(){
          console.log(this.name)
        }
      }
      obj.printName()
      
      function fn1(name){
        console.log(name)
        console.log(this)
      }
      fn1.call({x: 100}, 'zhangsan')

      console.log('---------作用域---------')
      if(false){
        var name = 'zhangsanfeng'
      }
      console.log(name)


      function xx(callback){
        var a = 'z'
        callback(a)
      }
      xx(function(name){
        console.log(name)
      })
      // 作为参数来传递
      function F1(){
        var a = 100
        return function(){
          console.log(a)
        }
      }

      function F2(fn){
        var a = 200
        fn()
      }


      // 实际开发中的闭包应用
      var i, a
      for(i = 0; i<10; i++){
        (function(i){
          a = document.createElement('a')
          a.innerHTML = i + '<br>'
          a.addEventListener('click', function(e){
            e.preventDefault()
            alert(i)
          })
          document.body.appendChild(a)
        })(i)
      }

      function isFirstLoad(){
        var _list = []
        return function(id){
          if(_list.indexOf(id) >= 0){
            return false
          } else {
            _list.push(id)
            return true
          }
        }
      }
      var firstLoad = isFirstLoad()
      console.log(firstLoad(10))
      console.log(firstLoad(20))
      console.log(firstLoad(10))


      console.log('--------异步---------')

  </script>
  <script>
    
  </script>
</body>
</html>